<template>
    <div>
        <Page class="points">
            <PageCard title="积分报表">
                <div class="btn_box">
                    <div class="search_box">
                        <EdSelect v-model="queryForm.villageId" :selectParams="data.proParams"></EdSelect>
                        <el-input v-model="queryForm.mobile" placeholder="请输入手机号" />
                        <el-button class="ed-button ed_black-bottom" @click="search"><svg-icon class="svg-middle" icon-class="search-svg"/>查 询</el-button>
                        <el-button class="ed-button ed_white_bottom" @click="reset"><svg-icon icon-class="reset-svg"/>重 置</el-button>
                    </div>
                    <div class="exp_btn">
                        <el-button class="ed-button ed_white_bottom" @click="exportBtn"><i class="el-icon-upload2"></i>导出</el-button>
                    </div>
                </div>
                <ApiTable :api="api.userListApi" ref="table" :params="queryForm">
                    <el-table-column type="index" width="80" label="序号"></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" prop="villageName" label="项目"></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" prop="userName" label="姓名"></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" prop="userPhone" label="手机号"></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" prop="userTotalIncome" label="总获取"></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" prop="userTotalExpend" label="总消耗"></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" prop="userRemainingPoint" label="用户余额"></el-table-column>
                </ApiTable> 
            </PageCard>
        </Page>
    </div>
</template>

<script setup>
    import Page from 'src/views/components/Page.vue'
    import PageCard from 'src/views/components/PageCard.vue'
    import ApiTable from 'src/components/ApiTable.vue'
    import EdSelect from 'src/components/EdSelect.vue'
    import { onActivated, reactive, nextTick, ref, defineExpose } from 'vue'
    import * as api from "../api";
    import message from 'src/utils/once-message'
    import { returnName } from "src/utils/common.js";
    const  queryForm = reactive({
        villageId: '',
        mobile: '',
    })
    const data = reactive({
        proParams: {
            placeholder:"请选择所属项目",
            options: [],
            props: {label:"villageName", value:"villageId"}
        }
    })

    const table = ref()
    onActivated(()=>{
        // 获取 所属项目
        api.getProjectList({pageSize: 999999}).then(res=>{
            data.proParams.options = res.data.records;
        })
        // nextTick(() => {
        //     table.value.load(1)
        // })
    })

    function search(){
        table.value.load(1)
    }
    function reset(){
        Object.assign(queryForm, {
            villageId: '',
            mobile: '',
        })
        nextTick(() => {
            table.value.load(1, 10);
        })
    }
    // 导出
    function exportBtn(){
        let page = table.value.page.total;
        if(page > 0){
            api.userExportApi(queryForm).then((res) =>{
                // console.log('导出', res)
            })
        }else {
            message.info({
                message:"暂无数据导出",
                duration: 2000,
                center:true
            })
        }
    }
    defineExpose({
        search,
    })
</script>

<style scoped lang="scss">
    .btn_box{
        display: flex;
        justify-content:space-between
    }
    :deep(.search_box .el-input__inner){
        width: 210px;
    }
</style>